import { Badge, TabBar } from "antd-mobile";
import { MessageOutline, MessageFill, UserOutline } from "antd-mobile-icons";
import { useNavigate, useLocation } from "react-router-dom";
import { HomeIcon, ShopIcon } from "./icons/IconFont";

function MyTabBar() {
  const navigate = useNavigate();
  // useLocation获取当前的location数据
  // 通过pathname设置选中的TabItem
  const { pathname } = useLocation();
  // console.log(pathname);
  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <HomeIcon />,
      // icon: <AppOutline />,
      badge: Badge.dot,
    },

    {
      key: "/shop_cart",
      title: "问诊",
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: "99+",
    },
    {
      key: "/user",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  return (
    <>
      <TabBar
        defaultActiveKey={pathname}
        onChange={(key) => {
          // console.log(key);
          navigate(key);
        }}
      >
        {tabs.map((item) => (
          <TabBar.Item
            // badge={item.badge}
            key={item.key}
            icon={item.icon}
            title={item.title}
          ></TabBar.Item>
        ))}
      </TabBar>
    </>
  );
}

export default MyTabBar;
